{% get_nav nav_id={data.nav.id} %}
{% assign header_nav = nav %}

<div id="mobile_nav" style="--nav-bg: {{data.nav_bg}};--menu-color: {{data.menu_color}};">
  <div class="mobile_wrap">
    <div class="mobile_nav_close h-[42px] flex items-center justify-between">
      <span class="inline-flex ml-[15px] font-bold">{{ storeConfig.name }}</span>
      <span class="flex cursor-pointer mr-[15px]">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
      </span>
    </div>
    <div class="mobile_nav_content">
      <div class="panel-menu-mobile">
        <div class="only-warp">
          <ul class="panel-menu-ul only-warp-menu only-ul">
            {% if header_nav.size > 0 %}
              {% for item in header_nav.nav_item %}
                <li class="panel-menu-item only-ul-li">
                  <a class="panel-navigation font-bold" style="color:{{item.setting_json.color}};font-style:{{item.setting_json.style}};font-weight:{{item.setting_json.bold}};text-decoration:{{item.setting_json.decoration}};" target="{{item.setting_json.open | default : '_self' }}" {% if item.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{item.url_json.url | default:'javascript:void(0)' }}">
                         {% if item.src %}
                          <header-nav-img>{% include 'lazy_img',src: item.src,alt: '' %}{{item.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{item.nav_item_name}}
                         {% endif %}
                       </a>
                  {% if item.children %}
                    <div class="et-menu-toggle">
                      <svg class="-rotate-90" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><title>Toggle menu</title><polyline points="6 9 12 15 18 9"></polyline></svg>
                    </div>
                    <ul class="panel-menu-ul only-ul only-ul-left100">
                      <li class="panel-menu-item panel-menu-parent font-bold">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-left"><title>Left</title><polyline points="15 18 9 12 15 6"></polyline></svg>
                        <span class="padding-left-14">{{ item.nav_item_name }}</span>
                      </li>
                      {% for el in item.children %}
                        <li class="panel-menu-item only-ul-li">
                          <a class="panel-navigation" style="color:{{el.setting_json.color}};font-style:{{el.setting_json.style}};font-weight:{{el.setting_json.bold}};text-decoration:{{el.setting_json.decoration}};" target="{{el.setting_json.open | default : '_self' }}" {% if el.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{el.url_json.url | default:'javascript:void(0)' }}">
                         {% if el.src %}
                          <header-nav-img>{% include 'lazy_img',src: el.src,alt: '' %}{{el.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{el.nav_item_name}}
                         {% endif %}
                       </a>
                          {% if el.children %}
                            <div class="et-menu-toggle">
                              <svg class="-rotate-90" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-down"><title>Toggle menu</title><polyline points="6 9 12 15 18 9"></polyline></svg>
                            </div>
                            <ul class="panel-menu-ul only-ul only-ul-left100">
                              <li class="panel-menu-item panel-menu-parent font-bold">
                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round" class="icon feather feather-chevron-left"><title>Left</title><polyline points="15 18 9 12 15 6"></polyline></svg>
                                <span class="padding-left-14">{{ el.nav_item_name }}</span>
                              </li>
                              {% for sel in el.children %}
                                <li class="panel-menu-item only-ul-li">
                                  <a class="panel-navigation" style="color:{{sel.setting_json.color}};font-style:{{sel.setting_json.style}};font-weight:{{sel.setting_json.bold}};text-decoration:{{sel.setting_json.decoration}};" target="{{sel.setting_json.open | default : '_self' }}" {% if sel.setting_json.model != 1 %}rel="external nofollow"{% endif %} href="{{sel.url_json.url | default:'javascript:void(0)' }}">
                         {% if sel.src %}
                          <header-nav-img>{% include 'lazy_img',src: sel.src,alt: '' %}{{sel.nav_item_name}}</header-nav-img>
                         {% else %}
                          {{sel.nav_item_name}}
                         {% endif %}
                       </a>
                                </li>
                              {% endfor %}
                            </ul>
                          {% endif %}
                        </li>
                      {% endfor %}
                    </ul>
                  {% endif %}
                </li>
              {% endfor %}
            {% else %}
              <li class="panel-menu-item">
                <a class="panel-navigation font-bold" href="/">Home</a>
              </li>
              <li class="panel-menu-item">
                <a class="panel-navigation font-bold" href="/collections">Collections</a>
              </li>
              <li class="panel-menu-item">
                <a class="panel-navigation font-bold" href="/search">Search</a>
              </li>
              <li class="panel-menu-item">
                <a class="panel-navigation font-bold" href="/collections/all">Product</a>
              </li>
            {% endif %}
          </ul>
        </div>
      </div>
    </div>

    {% if data.is_currency %}
      <div class="mobile_currency px-[15px] flex items-center font-bold {% if data.is_currency_flag == false %}none_flag{% endif %}">
        {% include 'currency',position: 'top',is_currency_flag: data.is_currency_flag %}
      </div>
    {% endif %}
  </div>
  <div class="mobile_nav_mask flex-1 h-full"></div>
</div>

<script>
  $(function () {
    
    // Mobile terminal menu switch
    let setp = 0;
    let onlyWarpDOM = $('.only-warp');
    let onlyMenuDOM = $('.only-warp-menu');

    $('.only-ul-li .et-menu-toggle').click(function (e) {
      e.stopPropagation();
      let onlyWarpWidth = onlyWarpDOM.width();

      if ($(this).parent().children('.panel-menu-ul').length) {
        setp++;
        e.preventDefault();
        onlyMenuDOM.css({
          left: -onlyWarpWidth * setp,
        });
        $(this).parent().children('.panel-menu-ul').addClass('only-ul-show');
      }
    });
    $('.panel-menu-parent').click(function (e) {
      e.stopPropagation();
      e.preventDefault();
      let onlyWarpWidth = onlyWarpDOM.width();
      setp--;

      $(this).parent().removeClass('only-ul-show');
      onlyMenuDOM.css({
        left: -onlyWarpWidth * setp,
      });
    });
  });
</script>
